"use client"

import { useState } from "react"
import { Heart, MessageCircle, Share, MoreHorizontal, Bookmark } from "lucide-react"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { type Post, getUserById } from "@/lib/mock-data"
import { formatDistanceToNow } from "date-fns"

interface PostCardProps {
  post: Post
}

export function PostCard({ post }: PostCardProps) {
  const [isLiked, setIsLiked] = useState(post.isLiked)
  const [likesCount, setLikesCount] = useState(post.likes)
  const [isBookmarked, setIsBookmarked] = useState(false)

  const user = getUserById(post.userId)

  if (!user) return null

  const handleLike = () => {
    setIsLiked(!isLiked)
    setLikesCount((prev) => (isLiked ? prev - 1 : prev + 1))
  }

  const handleBookmark = () => {
    setIsBookmarked(!isBookmarked)
  }

  return (
    <Card className="border-0 border-b border-gray-100 rounded-none">
      <CardContent className="p-4">
        {/* User Header */}
        <div className="flex items-center justify-between mb-3">
          <div className="flex items-center space-x-3">
            <Avatar className="h-10 w-10">
              <AvatarImage src={user.avatar || "/placeholder.svg"} alt={user.displayName} />
              <AvatarFallback>{user.displayName.charAt(0)}</AvatarFallback>
            </Avatar>
            <div>
              <div className="flex items-center space-x-1">
                <h3 className="font-semibold text-sm">{user.displayName}</h3>
                {user.verified && (
                  <div className="w-4 h-4 bg-blue-500 rounded-full flex items-center justify-center">
                    <span className="text-white text-xs">✓</span>
                  </div>
                )}
              </div>
              <p className="text-xs text-gray-500">
                {formatDistanceToNow(new Date(post.timestamp), { addSuffix: true })}
              </p>
            </div>
          </div>
          <Button variant="ghost" size="sm">
            <MoreHorizontal size={16} />
          </Button>
        </div>

        {/* Content */}
        <div className="mb-3">
          <p className="text-sm leading-relaxed mb-3">{post.content}</p>

          {/* Images */}
          {post.images && post.images.length > 0 && (
            <div className="rounded-lg overflow-hidden mb-3">
              <img src={post.images[0] || "/placeholder.svg"} alt="Post content" className="w-full h-64 object-cover" />
            </div>
          )}

          {/* Hashtags */}
          {post.hashtags.length > 0 && (
            <div className="flex flex-wrap gap-1 mb-3">
              {post.hashtags.map((tag) => (
                <span key={tag} className="text-blue-600 text-sm">
                  #{tag}
                </span>
              ))}
            </div>
          )}
        </div>

        {/* Actions */}
        <div className="flex items-center justify-between">
          <div className="flex items-center space-x-4">
            <Button
              variant="ghost"
              size="sm"
              onClick={handleLike}
              className={cn("flex items-center space-x-1 p-0 h-auto", isLiked ? "text-red-500" : "text-gray-500")}
            >
              <Heart size={20} fill={isLiked ? "currentColor" : "none"} />
              <span className="text-sm">{likesCount}</span>
            </Button>

            <Button variant="ghost" size="sm" className="flex items-center space-x-1 p-0 h-auto text-gray-500">
              <MessageCircle size={20} />
              <span className="text-sm">{post.comments}</span>
            </Button>

            <Button variant="ghost" size="sm" className="flex items-center space-x-1 p-0 h-auto text-gray-500">
              <Share size={20} />
              <span className="text-sm">{post.shares}</span>
            </Button>
          </div>

          <Button
            variant="ghost"
            size="sm"
            onClick={handleBookmark}
            className={cn("p-0 h-auto", isBookmarked ? "text-blue-600" : "text-gray-500")}
          >
            <Bookmark size={20} fill={isBookmarked ? "currentColor" : "none"} />
          </Button>
        </div>
      </CardContent>
    </Card>
  )
}

function cn(...classes: string[]) {
  return classes.filter(Boolean).join(" ")
}
